<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>拖拽文件</title>
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
    }

    .parent-dlg {
      position: absolute;
      width: 400px;
      height: 20px;
      border: 1px solid #aaaaaa;
      border-radius: 3px;
      top: 30%;
      left: 50%;
      z-index: 9999;
      margin-left: -200px;
      /* display: none; */
    }

    .parent-dlg .progress-label {
      position: absolute;
      left: 50%;
      top: 0;
      font-weight: bold;
      text-shadow: 1px 1px 0 #fff;
    }

    .parent-dlg .son {
      width: 0;
      height: 100%;
      background-color: #cccccc;
      text-align: center;
      line-height: 20px;
      font-size: 16px;
      font-weight: bold;
    }

    #main_content_center {
      width: 400px;
      padding: 80px 0;
      text-align: center;
      border: 1px dashed #CCC;
      color: #666;
    }

    .hovering {
      -webkit-box-shadow: inset 0px 0px 50px #BBB;
      -moz-box-shadow: inset 0px 0px 50px #BBB;
      -o-box-shadow: inset 0px 0px 50px #BBB;
      box-shadow: inset 0px 0px 50px #BBB;
    }

    .myimg {
      width: 200px;
    }
  </style>
</head>

<body>
  <!-- 进度条 -->
  <div class="parent-dlg">
    <div class="progress-label">0%</div>
    <div class="son"></div>
  </div>
  <!-- 要拖动到的地方 -->
  <div id="main_content_center">
    将文件拖到此处
  </div>
  <form action="http://127.0.0.1:3000/upload" method="post" enctype="multipart/form-data" target="nm_iframe" id="registSubmit">
    <input type="file" id="myfile" multiple name="myfiles">
    <input type="submit" value="上传文件">
    <!-- <button onclick="registPost">上传文件</button> -->
  </form>
  <iframe id="id_iframe" name="nm_iframe" style="display:none;"></iframe>
  <div id="content">

  </div>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
  <script>
    // $('#registSubmit').on('submit', function () {
    //   registPost();
    //   event.preventDefault() //阻止form表单默认提交
    // })

    // FormData才有上传进度
    function registPost() {
      var files = $('#myfile')[0].files[0];
      var formData = new FormData();
      formData.append("uploadName", files);
      $.ajax({
        url: "http://127.0.0.1:3000/upload",
        type: "post",
        data: $('#registSubmit').serialize(),
        // data: formData,
        // processData: false,
        // contentType: false,
        success: function (message) {
          console.log(message);
        },
        fail: function (err) {
          console.log(err);
        },
        xhr: function () {
          var xhr = $.ajaxSettings.xhr();
          if (onprogress && xhr.upload) {
            xhr.upload.onprogress = function (evt) {
              onprogress(evt);
            }
            return xhr;
          }
        }
      })
    }

    var ipt = $('#myfile');
    var img = $('#myimg');
    ipt.change(function () {
      var arr = ipt[0].files;
      for (var i = 0; i < arr.length; i++) {
        imgAppend(arr, i);
      }
    })

    function imgAppend(arr, i) {
      var fr = new FileReader();
      fr.readAsDataURL(arr[i]);
      fr.onload = function () {
        var str = '';
        str += '<p>' + arr[i].name + '</p>';
        str += '<img src="' + this.result + '" class="myimg">';
        // img.attr('src', fr.result);
        $('#content').prepend(str);
      }
    }

    var dz = $('#main_content_center')[0];
    dz.ondragover = function (ev) {
      //阻止浏览器默认打开文件的操作
      ev.preventDefault();
    }
    dz.ondrop = function (ev) {
      ev.preventDefault();
      var files = ev.dataTransfer.files;
      //文件预览
      for (var i = 0; i < files.length; i++) {
        imgAppend(files, i);
        var filesName = files[i].name;
        var extStart = filesName.lastIndexOf(".");
        var ext = filesName.substring(extStart, filesName.length).toUpperCase();
        if (ext != ".JPG" && ext != ".PNG" && ext != ".XML" && ext != ".GIF") { //判断是否是需要的问件类型
          alert("请选择.jpg、.png、.xml类型的文件上传！");
          return false;
        } else {
          console.log('正在上传');
          test(files[i]);
        }
      }
      $(".progress-label").html('0%');
      $(".son").css("width", 0);
      $(".parent-dlg").show();
    }

    function test(a) {
      var formData = new FormData();
      formData.append("uploadName", a);
      // formData.append("size", a.size);
      // formData.append("data", a);
      $.ajax({
        url: 'http://127.0.0.1:3000/upload',
        type: 'post',
        data: formData,
        // cache: false,
        // 序列化
        processData: false,
        contentType: false,
        success: function (data) {
          console.log(data);
        },
        xhr: function () {
          var xhr = $.ajaxSettings.xhr();
          if (onprogress && xhr.upload) {
            xhr.upload.onprogress = function (evt) {
              onprogress(evt);
            }
            // xhr.upload.addEventListener("progress", onprogress, false);
            return xhr;
          }
        }
      })
    };

    function onprogress(evt) {
      var loaded = evt.loaded; //已经上传大小情况
      var tot = evt.total; //附件总大小
      var per = Math.floor(loaded / tot * 100); //已经上传的百分比
      $(".progress-label").html(per + "%");
      $(".son").css("width", per + '%');
      if (per >= 100) {
        // $(".parent-dlg").hide();
        console.log('上传成功');
      }
    }
  </script>
</body>

</html>